import React from 'react'
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'
import ProtectedRoute from './ProtectedRoute'
import Login from './Login'
import Home from './Home'
import Personal from './Personal'
export default function App() {
    return (
        <BrowserRouter>
            <ul>
                <li><Link to='/' >首页</Link></li>
                <li><Link to='/login' >登录页</Link></li>
                <li><Link to='/personal'>个人中心</Link></li>
            </ul>
            <div>
                <Switch>
                    {/* 
                        render和children的区别 
                        render要匹配后才能显示
                        children无论是否匹配在会匹配
                    */}
                    {/* 是render配置，返回一个可渲染的React节点 */}
                    {/* <Route path="/login" render={() => <Login/>} /> */}
                    <Route path="/login" component={Login} />
                    <ProtectedRoute path="/personal" component={Personal} />
                    <Route path="/" component={Home} />
                </Switch>
            </div>
        </BrowserRouter>
    )
}
